<template>
  <aside class="sidebar">
    <div class="sidebar-header">
      <span class="sidebar-title">菜单导航</span>
    </div>
    <nav class="nav-menu">
      <!-- 主页 -->
      <button 
        class="nav-item"
        @click="navigateTo('Home')"
        :class="{ 'active': isActive('Home') }"
      >
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
        <span class="nav-text">主页</span>
      </button>

      <!-- 组织架构管理 -->
      <div class="nav-group">
        <button 
          class="nav-item nav-group-header"
          @click="toggleOrganizationMenu"
          :class="{ 'active': isOrganizationSectionActive() }"
        >
          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
          <span class="nav-text">组织架构管理</span>
          <span class="nav-badge" v-if="isOrganizationSectionActive()">3</span>
          <svg class="nav-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'expanded': isOrganizationMenuOpen }">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div class="nav-submenu" v-if="isOrganizationMenuOpen">
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('DepartmentManagement')"
            :class="{ 'active': isActive('DepartmentManagement') }"
          >
            <span class="nav-text">部门管理</span>
          </button>
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('ApplicationManagement')"
            :class="{ 'active': isActive('ApplicationManagement') }"
          >
            <span class="nav-text">应用管理</span>
          </button>
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('UserManagement')"
            :class="{ 'active': isActive('UserManagement') }"
          >
            <span class="nav-text">用户管理</span>
          </button>
        </div>
      </div>

      <!-- 任务角色管理 -->
      <div class="nav-group">
        <button 
          class="nav-item nav-group-header"
          @click="toggleTaskRoleMenu"
          :class="{ 'active': isTaskRoleSectionActive() }"
        >
          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
          <span class="nav-text">任务角色管理</span>
          <span class="nav-badge" v-if="isTaskRoleSectionActive()">4</span>
          <svg class="nav-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'expanded': isTaskRoleMenuOpen }">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div class="nav-submenu" v-if="isTaskRoleMenuOpen">
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('RoleDefinition')"
            :class="{ 'active': isActive('RoleDefinition') }"
          >
            <span class="nav-text">角色定义</span>
          </button>
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('RouteFieldConfiguration')"
            :class="{ 'active': isActive('RouteFieldConfiguration') }"
          >
            <span class="nav-text">路由字段配置</span>
          </button>
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('RoutingRules')"
            :class="{ 'active': isActive('RoutingRules') }"
          >
            <span class="nav-text">路由规则设置</span>
          </button>
          <button 
            class="nav-item nav-subitem"
            @click="navigateTo('RoleRouteManagement')"
            :class="{ 'active': isActive('RoleRouteManagement') }"
          >
            <span class="nav-text">角色路由管理</span>
          </button>
        </div>
      </div>

      <!-- 数据源配置 -->
      <button 
        class="nav-item"
        @click="navigateTo('DataSourceConfiguration')"
        :class="{ 'active': isDataSourceSectionActive() }"
      >
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
        <span class="nav-text">数据源配置</span>
      </button>

      <!-- 表单设计器 -->
<!-- 表单设计器导航项已移除 -->
      
      <!-- 任务流程设计器 -->
      <button 
        class="nav-item"
        @click="navigateTo('TaskProcessDesigner')"
        :class="{ 'active': isActive('TaskProcessDesigner') }"
      >
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
        <span class="nav-text">任务流程设计器</span>
      </button>
      
      <!-- 任务管理 -->
      <button 
        class="nav-item"
        @click="navigateTo('TaskManagement')"
        :class="{ 'active': isActive('TaskManagement') }"
      >
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
        <span class="nav-text">任务管理</span>
      </button>

      <!-- 全流程投演 -->
      <button 
        class="nav-item"
        @click="navigateTo('RouteSimulation')"
        :class="{ 'active': isActive('RouteSimulation') }"
      >
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
        <span class="nav-text">全流程投演</span>
      </button>
    </nav>
  </aside>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'

const router = useRouter()

// 子菜单展开状态
const isOrganizationMenuOpen = ref(false)
const isTaskRoleMenuOpen = ref(false)

// 检查当前路由是否激活
const isActive = (routeName) => {
  return router.currentRoute.value.name === routeName
}

// 导航到指定路由
const navigateTo = (routeName) => {
  router.push({ name: routeName })
}

// 切换组织架构管理子菜单
const toggleOrganizationMenu = () => {
  isOrganizationMenuOpen.value = !isOrganizationMenuOpen.value
}

// 切换任务角色管理子菜单
const toggleTaskRoleMenu = () => {
  isTaskRoleMenuOpen.value = !isTaskRoleMenuOpen.value
}

// 检查组织架构管理区域是否有活动路由
const isOrganizationSectionActive = () => {
  const activeRoute = router.currentRoute.value.name
  return ['DepartmentManagement', 'ApplicationManagement', 'UserManagement'].includes(activeRoute)
}

// 检查任务角色管理区域是否有活动路由
const isTaskRoleSectionActive = () => {
  const activeRoute = router.currentRoute.value.name
  return ['RoleDefinition', 'RouteFieldConfiguration', 'RoleRouteManagement', 'RoutingRules'].includes(activeRoute)
}

// 检查数据源配置区域是否有活动路由
const isDataSourceSectionActive = () => {
  const activeRoute = router.currentRoute.value.name
  return ['DataSourceConfiguration'].includes(activeRoute)
}

// 监听路由变化，根据当前路由自动展开对应的子菜单
router.afterEach(() => {
  if (isOrganizationSectionActive()) {
    isOrganizationMenuOpen.value = true
  }
  if (isTaskRoleSectionActive()) {
    isTaskRoleMenuOpen.value = true
  }
})
</script>

<style scoped>
.sidebar {
  width: var(--sidebar-width, 240px) !important;
  background-color: var(--bg-white);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
}

.sidebar-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-light);
}

.sidebar-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-menu {
  padding: var(--spacing-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-sm);
  background: none;
  border: none;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  color: var(--text-regular);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav-group-header {
  justify-content: space-between;
}

.nav-subitem {
  padding-left: calc(var(--spacing-lg) + 24px);
  font-size: var(--font-size-sm);
}

.nav-subitem::before {
  display: none;
}

.nav-item:hover {
  background-color: var(--bg-hover);
  color: var(--primary-color);
  transform: translateX(2px);
}

.nav-item.active {
  background-color: var(--bg-active);
  color: var(--primary-color);
  font-weight: 500;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.nav-icon {
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  transform: scale(1.1);
}

.nav-text {
  flex-grow: 1;
  text-align: left;
}

.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-item:hover .nav-badge,
.nav-item.active .nav-badge {
  background-color: var(--primary-hover);
  transform: scale(1.1);
}

.nav-arrow {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.nav-arrow.expanded {
  transform: rotate(180deg);
}

.nav-submenu {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.nav-submenu[style*="display: none"] {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar {
    width: 64px;
    overflow: hidden;
  }
  
  .sidebar-header {
    display: none;
  }
  
  .nav-menu {
    align-items: center;
    padding: var(--spacing-md) 0;
  }
  
  .nav-item {
    padding: var(--spacing-md) 0;
    justify-content: center;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    margin: 0 auto;
  }
  
  .nav-subitem {
    padding-left: var(--spacing-md);
  }
  
  .nav-item::before {
    display: none;
  }
  
  .nav-text,
  .nav-badge,
  .nav-arrow {
    display: none;
  }
  
  .nav-item:hover,
  .nav-item.active {
    transform: none;
    background-color: var(--bg-active);
    color: var(--primary-color);
  }
}
</style>